<template>
	<uni-tag
		v-if="orderStatus"
		:text="orderStatus"
		class="order-tag"
		:custom-style="tagStyle"
	></uni-tag>
</template>

<script>
import { workflowStatusMap } from '@/constants/common.js';
export default {
	props: {
		orderStatus: {
			type: String,
			default: '',
		},
	},
	data() {
		return {};
	},
	computed: {
		color() {
			return workflowStatusMap[this.orderStatus]?.color || '#fff';
		},
		bgColor() {
			return workflowStatusMap[this.orderStatus]?.bgColor || '#fff';
		},
		tagStyle() {
			// 使用小程序兼容的属性名
			const styleMap = {
				color: this.color,
				'background-color': this.bgColor,
				border: `1px solid ${this.color}`,
				'font-weight': '700',
				'border-radius': '2px 30px 30px 2px',
				'text-decoration': 'none',
			};
			// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
			// 小程序环境：返回字符串
			const styleStr = Object.entries(styleMap)
				.map(([key, value]) => `${key}:${value}`)
				.join(';');
			return styleStr;
			// #else
			// H5/App环境：返回对象（使用驼峰转换）
			const styleObj = {};
			Object.entries(styleMap).forEach(([key, value]) => {
				// 将带连字符的属性名转换为驼峰式
				const camelKey = key.replace(/-(\w)/g, (_, c) =>
					c.toUpperCase(),
				);
				styleObj[camelKey] = value;
			});
			return styleObj;
			// #endif
		},
	},
	methods: {},
};
</script>

<style scoped lang="scss">
.order-tag {
	font-weight: 700;
	border-radius: 2px 30px 30px 2px;
	text-decoration: none;
}
</style>
